if(Ext){
	Ext.BLANK_IMAGE_URL = 'scripts/ext/resources/images/default/s.gif'
}
var workTab;

var treeNodeFromXml = function treeNodeFromXml(){
	var rootNode = new Ext.tree.AsyncTreeNode();
	
	//First level menu
	var menuNode = new Ext.tree.TreeNode({
			text: 'Exhibition'
	});
	rootNode.appendChild(menuNode);
	
	var subMenuNode1 = new Ext.tree.TreeNode({
		text: 'Order'
	});
	
	subMenuNode1.menuId = 1;
	subMenuNode1.actionURL = 'order_list.html';
	subMenuNode1.actionName = 'Order';
	
	var subMenuNode2 = new Ext.tree.TreeNode({
		text: 'Technic chart'
	});
	
	subMenuNode2.menuId = 2;
	subMenuNode2.actionURL = 'technic_chart_list.html';
	subMenuNode2.actionName = 'Technic chart';
	
	var subMenuNode3 = new Ext.tree.TreeNode({
		text: 'Color'
	});
	
	subMenuNode3.menuId = 3;
	subMenuNode3.actionURL = 'color_list.html';
	subMenuNode3.actionName = 'Color';
	
	var subMenuNode4 = new Ext.tree.TreeNode({
		text: 'Yarn'
	});
	
	subMenuNode4.menuId = 4;
	subMenuNode4.actionURL = 'yarn_list.html';
	subMenuNode4.actionName = 'Yarn';
	

	menuNode.appendChild(subMenuNode1);
	menuNode.appendChild(subMenuNode2);
	//menuNode.appendChild(subMenuNode3);
	menuNode.appendChild(subMenuNode4);
			
	return rootNode;
}

Ext.onReady(function(){

    Ext.state.Manager.setProvider(new Ext.state.CookieProvider());
	
	var basicFunctionMenu = new Ext.tree.TreePanel({
    	id: 'tree-panel',
    	title: 'Functions',
		iconCls: 'basicFunction',
        region:'north',
        split: true,
        height: 300,
        minSize: 150,
        autoScroll: true,
        
        // tree-specific configs:
        rootVisible: false,
        lines: false,
        singleExpand: true,
        useArrows: true,
        
        root: treeNodeFromXml()
    });
    
	// Assign the changeLayout function to be called on tree node click.
    basicFunctionMenu.on('click', function(n){
    	var sn = this.selModel.selNode || {}; // selNode is null on initial selection
    	if(n.leaf && n.id != sn.id){  // ignore clicks on folders and currently selected node 
    		//alert('click');
    	}
		if(n.actionURL && n.actionURL != 'null'){
			addTab(n.menuId, n.actionURL, n.actionName);
		}
    });
		
	workTab = new Ext.TabPanel({
		            region: 'center',
		            deferredRender: false,
					enableTabScroll:true
      			})
	
	
	var addTab = function(menuId, actionURL, actionName){
		var timestamp = new Date().getTime();
		if(workTab.findById('tab' + menuId)){
			workTab.activate(workTab.findById('tab' + menuId));
			return;
		}
		var tab = workTab.add({
			id: 'tab' + menuId,
            title: actionName,
            iconCls: 'tabs',
            html: '<iframe name="' + timestamp + '" id="' + timestamp + '" src="' + actionURL +'" width="100%" height="100%"><iframe/>',
            closable:true,
			tbar: getTabAction(timestamp, menuId)
        });
		tab.show();
	}
	
    var viewport = new Ext.Viewport({
        layout: 'border',
        items: [new Ext.BoxComponent({ // raw
            region: 'north',
            el: 'north',
            height: 32
        }),
		 {
            region: 'west',
            id: 'west-panel',
            title: 'Menu',
            split: true,
            width: 200,
            minSize: 175,
            maxSize: 400,
            collapsible: true,
            margins: '0 0 0 5',
            layout: 'accordion',
            layoutConfig: {
                animate: true
            },
            items: [basicFunctionMenu]
        }, workTab]
    });
	
	
	addTab(1, 'order_list.html', 'Order');
	processBarInstance.updateMsg('Loading complete......');
	processBarInstance.hide();
});
